<template>
  <div id='Live' class="about">
    <div class="window">
      <div class="个人信息">
      </div>
      <div class="名字">
        {{ idUser }}
      </div>
      <i class="el-icon-goods">
        <div class="图标文字">
          {{coin}}
        </div>
      </i>
      <i class="el-icon-user-solid">
        <div class="图标文字">
          {{coin}}
        </div>
      </i>
      <el-button class="关注" type="primary" size="small">关注</el-button>
      <el-button class="举报" type="text" @click="open">
        <i class="el-icon-s-release">举报</i>
      </el-button>
      <el-button class="分享" type="text" @click="open">
        <i class="el-icon-share">分享</i>
      </el-button>
      <el-button class="标签-1" size="small"  round>金融</el-button>
      <el-button class="标签-2" size="small"  round>货币</el-button>
      <el-button class="标签-3" size="small"  round>分析</el-button>
      <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
        <img class="头像"  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
        <div class="center">
          <div class="live">
            <div id="dplayer"></div>
          </div>
        </div>
      <el-row :gutter="16" type="flex" justify="center">
        <el-col :span="3">
          <div class="img">
            <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
              <img  :src="require('../assets/赞.jpg')" alt="图片文本描述">
            </a>
            <div class="价值">
              <i class="el-icon-coin">1</i>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="img">
            <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
              <img  :src="require('../assets/一朵鲜花.jpg')" alt="图片文本描述">
            </a>
            <div class="价值">
              <i class="el-icon-coin">2</i>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="img">
            <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
              <img  :src="require('../assets/一文钱.jpg')" alt="图片文本描述">
            </a>
            <div class="价值">
              <i class="el-icon-coin">10</i>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="img">
            <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
              <img  :src="require('../assets/花束.jpg')" alt="图片文本描述">
            </a>
            <div class="价值">
              <i class="el-icon-coin">20</i>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="img">
            <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
              <img  :src="require('../assets/一串钱.jpg')" alt="图片文本描述">
            </a>
            <div class="价值">
              <i class="el-icon-coin">100</i>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="img">
            <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
              <img :src="require('../assets/银元宝.jpg')" alt="图片文本描述">
            </a>
            <div class="价值">
              <i class="el-icon-coin">198</i>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="img">
            <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
              <img  :src="require('../assets/金元宝.jpg')" alt="图片文本描述">
            </a>
            <div class="价值">
              <i class="el-icon-coin">888</i>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div class="img">
            <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
              <img  :src="require('../assets/金条.jpg')" alt="图片文本描述">
            </a>
            <div class="价值">
              <i class="el-icon-coin">5888</i>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="我的富吾币">
        我的富吾币：100
        <el-button class="充值" type="text" @click="open">
          <i class="el-icon-coin">充值</i>
        </el-button>
      </div>

    </div>
    <div class="排行">
      <el-collapse >
        <el-collapse-item title="   贡献排行" >
          <div>
              <div v-for="o in 5" :key="o" style="padding-top: 6px;padding-bottom: 6px;">
                <el-row>
                  <el-col :span="6">
                    <div class="文本-中">

                      {{ o }}
                    </div>
                  </el-col>

                  <el-col :span="4">
                    <div class="block"><el-avatar shape="square" :size="20" :src="squareUrl"></el-avatar></div>
                  </el-col>

                  <el-col :span="8">
                    <div class="文本-中">
                      {{ tableData[o-1].name }}
                    </div>

                  </el-col>

                  <el-col :span="5">
                    <div class="文本-中" style="text-align: right;">
                      {{ tableData[o-1].hot }}
                    </div>

                  </el-col>
                </el-row>
              </div>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-tabs >

      </el-tabs>
    </div>
    <div class="danmu">
      <a href="https://sm.ms/image/sq87LvMzobDU5ch" target="_blank">
        <img class="评论头像" style="float:bottom" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></a>
      <el-input class="评论框" v-model="input" placeholder="留下你的评论"></el-input>
    </div>
    <div class="公告">
      <div class="文本-标题">
        直播公告
        <el-divider></el-divider>
        <div class="公告内容">
          你什么也没有写，其他人无法在你的直播间看见主播公告
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let Hls = require('hls.js');
import DPlayer from 'dplayer';
export default {
  name: "Live",
  data() {
    return {
      input: '',
      //头像
      defaultActivePage_1: '001',
      /*创作榜默认显示页*/
      defaultActivePage_2: '001',
      /*作品榜默认显示页*/
      defaultActivePage_3: '001',
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      imglist: [
        require('../assets/tu.jpg'),
        require('../assets/tu.jpg'),
        require('../assets/tu.jpg'),
        require('../assets/tu.jpg'),
      ],
      tableData: [
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'},
        {name:'gta5',hot:'1.1w'}],
      idUser:"淹死了一条鱼",
      coin:"100"
    }
  },
  methods: {
      open() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      live(){
        const dp = new DPlayer({
          live:true,
          container: document.getElementById('dplayer'),
          video: {
            url: 'https://live.carvedu.com/a/b.m3u8?auth_key=1589281526-0-0-02d0913b6a725efdb53f0deed823e418', // 示例地址
            type: 'customHls',
            customType: {
              customHls: function (video, player) {
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
              },
            },
          },
        });
      }
    },
    mounted() {
      this.live();
    },
}
</script>

<style>
body{ background-color:#EEEEEE}
.window{
  background-color: #FFFFFF;
  margin-top:1%;
  margin-bottom:5%;
  margin-left: 3%;
  margin-right: 1%;
  width: 70%;
  float: left;
  border-radius:8px;
}
.排行{
  background-color: #FFFFFF;
  margin-top:1%;
  margin-right: 3%;
  width: 23%;
  float: right;
  border-radius:8px;
}
.danmu{
  position: relative;
  background-color: #FFFFFF;
  margin-top:1%;
  height:480px;
  margin-right: 3%;
  width: 23%;
  float: right;
  border-radius:8px;
}
.个人信息{
  position: relative;
  margin-top:2%;
  margin-left:2%;
  margin-right: 2%;
  margin-bottom: 2%;
  height:80px;

}
.头像{
  position:relative;
  top:-100px;
  width:8%;
  height:auto;
  margin-left:2%;
  margin-top:2%;
  margin-bottom: 2%;
  float: left;
}
.名字 {
  position: absolute;
  font-size:large;
  top:100px;
  float:left;
  margin-left:8%;
}
.文本-中 {
  padding-left:10%;
  font-size: xx-small;
  text-align: left;
}
@keyframes scrollTo {
  to{
    transform: translateX(-100px);
  }}
.评论框{
    position:absolute;
    width:70%;
    height:5px;
    float:bottom;
    top:425px;
  left:50px;
}
.el-icon-goods
{
  position: absolute;
  left:150px;
  top:140px;
}
.图标文字
{
  position:relative;
  top:-20px;
  left:20px;
  font-size: 26px;
  transform: scale(0.5)
}
.el-icon-user-solid {
  position: absolute;
  left:200px;
  top:140px;
}
.关注{
  position: absolute;
  left:700px;
  top:130px;
}
.举报{
  position: absolute;
  left:700px;
  top:80px;
}
.分享{
  position: absolute;
  left:750px;
  top:80px;
}
#dplayer{
  width: 100%;
  height: 400px;
}
.center{
  width:100%;
}
.live{
  position:relative;
  top:-100px;
  width:100%;
  height: auto;
  margin-bottom: 5%;
}
.标签-1{
  position: absolute;
  left:320px;
  top:100px;
}
.标签-2{
  position: absolute;
  left:380px;
  top:100px;
}
.标签-3{
  position: absolute;
  left:440px;
  top:100px;
}
img
{
  width:70%;
  height:auto;
}

.img
{
  position:relative;
  left:20%;
  top:-100px;
}
.我的富吾币
{
  font-size:small;
  position: absolute;
  left:640px;
  top:750px;
}
.价值{
  font-size:small;
  text-align: center;
}
.评论头像
{
  position:relative;
  top:-100px;
  width:15%;
  height:auto;
  margin-left:2%;
  margin-top:2%;
  margin-bottom: 2%;
  top:420px;
  float: left;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.公告{
  position: relative;
  background-color: #FFFFFF;
  margin-top:1%;
  height:200px;
  margin-right: 3%;
  width: 23%;
  float: right;
  border-radius:8px;
}
.文本-标题 {
  font-size: 15px;
  text-align: left;
  margin-top:5%;
  margin-left:5%;
}
.公告内容
{
  font-size:x-small;
  color: #C0C0C0;
}
</style>
